<template>
  <view class="report-company-page">
    <!-- 标题栏 -->
    <view class="header">
      <view class="back-btn" @click="onBack">
        <text class="iconfont">&#xe600;</text>
      </view>
      <text class="title">白蚁防治企业</text>
    </view>
    <view class="line"></view>
    <!-- 行政区筛选 -->
    <view class="filter-bar">
      <picker
        @change="onDistrictChange"
        :range="districtList"
        class="district-filter"
      >
        <view class="picker-text">
          <text>{{ districtList[selectedDistrictIndex] || "行政区" }}</text>
          <text class="arrow">&#xe601;</text>
        </view>
      </picker>
    </view>

    <!-- 公司列表 -->
    <view class="company-list">
      <view
        v-for="(company, index) in companyList"
        :key="index"
        class="company-item"
      >
        <view class="company-name">{{ company.name }}</view>
        <view class="info-item">
          <image
            class="info-icon"
            src="../../assets/add-icon.png"
            mode="aspectFit"
          ></image>
          <text class="label">联系电话:</text>
          <text class="value">{{ company.phone }}</text>
        </view>
        <view class="info-item">
          <image
            class="info-icon"
            src="../../assets/add-icon.png"
            mode="aspectFit"
          ></image>
          <text class="label">企业地址:</text>
          <text class="value">{{ company.address }}</text>
        </view>
        <view
          class="info-item description"
          :class="{ expanded: company.isExpanded }"
        >
          <image
            class="info-icon"
            src="../../assets/add-icon.png"
            mode="aspectFit"
          ></image>
          <text class="label">企业简介:</text>
          <text class="value">{{ getDisplayDescription(company) }}</text>
        </view>

        <!-- 收费标准 -->
        <view class="pricing-section" v-show="company.isExpanded">
          <text class="pricing-title">收费标准</text>
          <view class="pricing-images">
            <view
              v-for="(image, imgIndex) in company.pricingImages"
              :key="imgIndex"
              class="pricing-image-placeholder"
            >
              <image
                :src="image"
                mode="aspectFill"
                class="pricing-actual-image"
                @click="previewPricingImage(company.pricingImages, imgIndex)"
              ></image>
            </view>
          </view>
        </view>

        <!-- 收起/展开图标 -->
        <view class="collapse-toggle" @click="toggleExpand(index)">
          <image
            class="toggle-icon"
            :class="{ rotate: company.isExpanded }"
            src="../../assets/btm.png"
            mode="aspectFit"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      districtList: [
        "黄浦区",
        "徐汇区",
        "长宁区",
        "静安区",
        "普陀区",
        "虹口区",
        "杨浦区",
        "浦东新区",
        "闵行区",
        "宝山区",
        "嘉定区",
        "金山区",
        "松江区",
        "青浦区",
        "奉贤区",
        "崇明区",
      ], // 示例行政区列表
      selectedDistrictIndex: null, // 默认未选择
      companyList: [
        {
          name: "上海上昆杀虫科技有限公司",
          phone: "18979897987",
          address: "三林路337号601室",
          description:
            "上海上昆杀虫科技有限公司是一家专业提供灭鼠、杀虫、灭蟑螂、除四害等有害生物防治技术,空间消毒技术、室内空气加香技术等为一体的研发、方案制作与实施、相关设备租赁和销售的专业的消杀公司。",
          pricingImages: [
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
          ], // Sample images
          isExpanded: false, // Added for collapse/expand
        },
        {
          name: "上海帮帮虫害防治有限公司",
          phone: "13890897856",
          address: "康桥路87号7号楼",
          description:
            "上海帮帮虫害防治有限公司是一家专业提供灭鼠、杀虫、灭蟑螂、除四害等有害生物防治技术...", // Truncated description from image
          pricingImages: [
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
            "https://kimi-img.moonshot.cn/webimg2/static-o.oss-cn-shenzhen.aliyuncs.com/084f8b8c95f291bf9193f2353073f31f0f089f9c",
          ], // Sample images
          isExpanded: false, // Added for collapse/expand
        },
        // Add more mock data as needed
      ],
    };
  },
  methods: {
    onBack() {
      uni.navigateBack();
    },
    onDistrictChange(e) {
      this.selectedDistrictIndex = e.detail.value;
      console.log("选中的行政区索引:", this.selectedDistrictIndex);
      // 在这里可以根据选中的行政区过滤公司列表数据
    },
    toggleExpand(index) {
      this.companyList[index].isExpanded = !this.companyList[index].isExpanded;
    },
    getDisplayDescription(company) {
      return company.description;
    },
    previewPricingImage(urls, index) {
      uni.previewImage({
        urls: urls,
        current: urls[index],
        indicator: "number",
        loop: true,
      });
    },
  },
};
</script>

<style lang="scss">
.report-company-page {
  min-height: 100vh;
  background: #f3f3fa;
  padding-top: 180rpx; // Adjust based on header and filter bar height
  overflow-x: hidden;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .back-btn {
    position: absolute;
    left: 30rpx;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 40rpx;
    color: #222;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #222;
  }
}
.line {
  width: 750rpx;
  height: 2rpx;
  background: #e5e7ea;
  position: relative;
}
// 媒体查询物理像素比为3的情况
@media (-webkit-min-device-pixel-radio: 3), (min-device-pixel-radio: 3) {
  .line {
    -webkit-height: 3rpx;
    height: 3rpx;
  }
}
.filter-bar {
  position: fixed;
  top: 100rpx;
  width: 100%;
  z-index: 90; /* Ensure it's above content but below header */
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 0; /* Remove bottom margin as it's fixed */

  .district-filter {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    width: 100%;

    .picker-text {
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: space-between;
    }

    .arrow {
      margin-left: 10rpx;
      font-size: 24rpx;
    }
  }
}

.company-list {
  padding: 0 30rpx;
  padding-top: 20rpx; /* Add some space between filter bar and list */
}

.company-item {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Hide overflowing content during transition/collapse */

  .company-name {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15rpx;
    font-size: 24rpx;
    color: #999;

    .info-icon {
      width: 32rpx; /* Adjust size to match iconfont size */
      height: 32rpx; /* Adjust size to match iconfont size */
      margin-right: 10rpx;
      // color: #007aff; // Color is set by the image now
    }

    .label {
      flex-shrink: 0;
      margin-right: 10rpx;
    }

    .value {
      flex: 1;
    }
  }

  .info-item.description .value {
    white-space: pre-wrap;
    word-break: break-all;
    overflow: hidden; /* Required for text-overflow and line-clamp */
    text-overflow: ellipsis; /* Show ellipsis */
    display: -webkit-box; /* Required for -webkit-line-clamp */
    -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
    -webkit-line-clamp: 1; /* Truncate to 1 line by default */

    .expanded & {
      /* Apply when the parent .info-item.description has class .expanded */
      -webkit-line-clamp: unset; /* Remove line clamp when expanded */
      text-overflow: unset; /* Remove ellipsis when expanded */
    }
  }

  .pricing-section {
    margin-top: 20rpx;
    padding-top: 20rpx;
    border-top: 1px solid #eee;

    .pricing-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
      display: block;
    }

    .pricing-images {
      display: flex;
      gap: 15rpx;
      flex-wrap: wrap;
    }

    .pricing-image-placeholder {
      width: calc((100% - 30rpx) / 3);
      height: 120rpx;
      background-color: #f0f0f0; /* Keep background as a fallback or visual aid */
      border-radius: 8rpx;
      display: flex; /* Use flex to center image if needed */
      align-items: center;
      justify-content: center;
      overflow: hidden; /* Hide overflowing parts of the image */
    }

    .pricing-actual-image {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Cover the container while maintaining aspect ratio */
      border-radius: 8rpx; /* Match container border-radius */
    }
  }

  .collapse-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20rpx;
    cursor: pointer;

    .toggle-icon {
      width: 40rpx; /* Adjust size as needed */
      height: 40rpx; /* Adjust size as needed */
      transition: transform 0.3s ease;
    }

    .rotate {
      transform: rotate(180deg);
    }
  }
}
</style>
